<template>
	<div ref="chartRef" id="ct_btm_echarts1" :style="{width: '100%', height: '182px'}"></div>
</template>
<script lang="js">
	import * as echarts from 'echarts';
	export default {
		name: 'ctlineEcharts',
		data() {
			return {
				myCharts1: null,
			};
		},
		mounted() {
			this.initEcharts(this.echartsValue);
			window.onresize = () => {
				this.myCharts1.resize();
			};
		},
		methods: {
			initEcharts(echartsValue) {
				var that = this;
				this.myCharts1 = echarts.init(document.getElementById('ct_btm_echarts1'));

				// 绘制图表
				let option = {
					backgroundColor: '#0c182d',
					grid: {
						top: '19%',
						bottom: '10%', //也可设置left和right设置距离来控制图表的大小
						left: '8%',
						right: '7%',
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow',
							label: {
								show: true,
							},
						},
					},
					legend: {
						data: ['充电量', '充电次数'],
						top: '15%',
						right: '15%',
						textStyle: {
							color: '#ffffff',
						},
					},
					xAxis: {
						data: ['1', '4', '6', '8', '10', '12'],
						axisLine: {
							show: true, //隐藏X轴轴线
							lineStyle: {
								color: '#01FCE3',
							},
						},
						axisTick: {
							show: true, //隐藏X轴刻度
						},
						axisLabel: {
							show: true,
							textStyle: {
								color: '#7d8590', //X轴文字颜色
							},
						},
					},
					yAxis: [
						{
							type: 'value',
							name: '充电量（度）',
							nameTextStyle: {
								color: '#7d8590',
							},
							splitLine: {
								show: false,
							},
							axisTick: {
								show: true,
							},
							axisLine: {
								show: true,
								lineStyle: {
									color: '#FFFFFF',
								},
							},
							axisLabel: {
								show: true,
								textStyle: {
									color: '#7d8590',
								},
							},
						},
						{
							type: 'value',
							name: '充电次数',
							nameTextStyle: {
								color: '#7d8590',
							},
							position: 'right',
							splitLine: {
								show: false,
							},
							axisTick: {
								show: false,
							},
							axisLine: {
								show: false,
							},
							axisLabel: {
								show: true,
								formatter: '{value}', //右侧Y轴文字显示
								textStyle: {
									color: '#7d8590',
								},
							},
						},
						{
							type: 'value',
							gridIndex: 0,
							min: 50,
							max: 100,
							splitNumber: 8,
							splitLine: {
								show: false,
							},
							axisLine: {
								show: false,
							},
							axisTick: {
								show: false,
							},
							axisLabel: {
								show: false,
							},
							splitArea: {
								show: true,
								areaStyle: {
									color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)'],
								},
							},
						},
					],
					series: [
						{
							name: '充电量',
							type: 'line',
							yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
							smooth: true, //平滑曲线显示
							showAllSymbol: true, //显示所有图形。
							symbol: 'circle', //标记的图形为实心圆
							symbolSize: 10, //标记的大小
							itemStyle: {
								//折线拐点标志的样式
								color: '#058cff',
							},
							lineStyle: {
								color: '#058cff',
							},
							areaStyle: {
								color: 'rgba(5,140,255, 0.2)',
							},
							data: [2, 8, 4, 3, 9, 2, 4.3, 1.5],
						},
						{
							name: '充电次数',
							type: 'bar',
							barWidth: 15,
							itemStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
										{
											offset: 0,
											color: '#00FFE3',
										},
										{
											offset: 1,
											color: '#4693EC',
										},
									]),
								},
							},
							data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5],
						},
					],
				};
				this.myCharts1.setOption(option);
				this.myCharts1.resize();
			},
		},
	};
</script>
